<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>解析打包css和less文件</title>
  <!-- 
  在 Webpack 中，处理 CSS 和 LESS 文件需要使用相应的加载器（loader）。
  1. 处理 CSS 文件
  要在 Webpack 中解析和打包 CSS 文件，通常需要使用以下几个加载器：
  - style-loader：将 CSS 通过  `<style>`  标签插入到 DOM 中。
  - css-loader：解析 CSS 文件中的  `@import`  和  `url()`  语句，处理 CSS 模块。

   配置示例：
  module.exports = {
    module: {
      rules: [
        {
          test: /\.css$/, // 匹配所有 .css 文件
          use: ['style-loader', 'css-loader'], // 使用的加载器
        },
      ],
    },
  };
  2. 处理 LESS 文件
  处理 LESS 文件的步骤类似，但需要额外的 LESS 加载器：
  - less-loader：将 LESS 编译为 CSS。
  - style-loader 和 css-loader 同样需要。

   配置示例：
  module.exports = {
    module: {
      rules: [
        {
          test: /\.less$/, // 匹配所有 .less 文件
          use: [
            'style-loader', // 将 CSS 插入到 DOM
            'css-loader',   // 解析 CSS
            'less-loader',  // 将 LESS 编译为 CSS
          ],
        },
      ],
    },
  };

  3. 安装依赖
  在使用这些加载器之前，需要先安装相关依赖。可以使用 npm 或 yarn 进行安装：
  npm install style-loader css-loader less-loader less --save-dev
  或者使用 yarn：
  yarn add style-loader css-loader less-loader less --dev
  4. 使用示例
  在你的 JavaScript 文件中，可以直接引入 CSS 或 LESS 文件：
  import './styles.css'; // 引入 CSS 文件
  import './styles.less'; // 引入 LESS 文件
  总结

  - CSS 文件处理：使用  `style-loader`  和  `css-loader` 。
  - LESS 文件处理：使用  `style-loader` 、 `css-loader`  和  `less-loader` 。
  - 安装依赖：确保安装了所需的加载器和预处理器。
  通过以上配置，Webpack 可以有效地解析和打包 CSS 和 LESS 文件，帮助开发者在项目中使用样式。

  npm install webpack webpack-cli css-loader less less-loader postcss-loader postcss-preset-env --save-dev
  -->
</head>
<body>

  <script src="./dist/bundle.js"></script>
  
</body>
</html>